<script setup>
  // 导入 MyDialog
  import MyDialog from './components/MyDialog.vue';
</script>

<template>
  <div>
    <!-- 2. 使用 -->
    <MyDialog>
      <!-- template + v-slot:name -->
      <template v-slot:header>
        <h3>警告</h3>
      </template>
      <template v-slot:content>
        <p>你确实要删除内容吗</p>
      </template>
    </MyDialog>

    <!-- 顺序没太大关系，不过一般都是按照顺序来 -->
    <MyDialog>
      <template v-slot:content>
        <p>你确实要删除内容吗</p>
      </template>
      <template v-slot:header>
        <h3>警告</h3>
      </template>
    </MyDialog>

    <!-- 简写 使用# -->
    <MyDialog>
      <template #content>
        账号：<input type="text"> <br> <br>
        密码：<input type="password"> <br> <br>
      </template>
    </MyDialog>
  </div>
</template>

<style scoped></style>